<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-au" lang="en-au" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="jGauge, gauge, dial, dial gauge, meter, metre, speedo, taco, speedometer, tacometer, gadget, widget, JavaScript, jQuery, AJAX" />
		<meta name="description" content="jGauge is an open-source JavaScript dial gauge designed to be simple and powerful!" />
		<meta name="author" content="Darian Cabot (http://www.dariancabot.com/)" />
		<meta name="copyright" content="Copyright (c) 2010-2011 Darian Cabot, http://www.dariancabot.com" />
		
		<title>jGauge 0.3.0 Alpha 3 - Live Demonstration</title>
		
		<link rel="shortcut icon" href="img/favicon.ico" type="image/vnd.microsoft.icon" />
		<link rel="index" href="http://www.dariancabot.com/projects-2/jgauge/" title="jGauge" />
		<link rel="stylesheet" href="css/page.css" type="text/css" />
		
		<!-- INCLUDE THE FOLLOWING JGAUGE REQUIREMENTS... -->
		<link rel="stylesheet" href="css/jgauge.css" type="text/css" /> <!-- CSS for jGauge styling. -->
		<!--[if IE]><script type="text/javascript" language="javascript" src="js/excanvas.min.js"></script><![endif]--> <!-- Extends canvas support to IE. (Possibly buggy, need to look into this.) -->
		<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!-- jQuery JavaScript library. -->
		<script language="javascript" type="text/javascript" src="js/jQueryRotate.min.js"></script> <!-- jQueryRotate plugin used for needle movement. -->
		<script language="javascript" type="text/javascript" src="js/jgauge-0.3.0.a3.js"></script> <!-- jGauge JavaScript. -->
	</head>
	<body>
		<div id="header"><div id="title"><a href="http://www.dariancabot.com"><img src="img/title.png" width="243" height="73" alt="dariancabot.com" /></a></div></div>
		
		<div id="main">
			<h1>jGauge 0.3.0 Alpha 3 - Live Demonstration</h1>
			<p><em>jGauge is an open-source JavaScript dial gauge designed to be simple and powerful!</em></p>
			<p>Please note this is an alpha release. Version 0.3.0 is still under development use with caution! ;-)  If you find jGauge useful a link back to my blog is appreciated.</p>
			<p><a href="http://www.jgauge.com/">See the main project page</a> for more information and downloads.</p>
			<p><a href="doc.html">See the documentation</a> for developer references and usage examples.</p>
			
			<!-- These DIVs are the placeholders for our example jGauges -->
			<div id="jGaugeDemo1" class="jgauge"></div>
			<div id="jGaugeDemo2" class="jgauge"></div>
			<div id="jGaugeDemo3" class="jgauge"></div>
			
			<!-- Clear the float -->
			<div class="break"></div>
			
			<!-- Create some simple javascript link/buttons for testing -->
			<p>Set the value:</p>
			<div class="buttons">
				<a href="javascript:setVal(0)">0</a> 
				<a href="javascript:setVal(2.5)">2.5</a> 
				<a href="javascript:setVal(5)">5</a> 
				<a href="javascript:setVal(8)">8</a> 
				<a href="javascript:setVal(10)">10</a>
				<div class="break"></div>
			</div>
			
			<p>Bump the value:</p>
			<div class="buttons">
				<a href="javascript:bumpVal(0.1)">+ 0.1</a> 
				<a href="javascript:bumpVal(1)">+ 1</a> 
				<a href="javascript:bumpVal(100)">+ 100</a> 
				<a href="javascript:bumpVal(1000)">+ 1000</a> 
				<a href="javascript:bumpVal(1000000)">+ 10<sup>6</sup></a> 
				<a href="javascript:bumpVal(1000000000)">+ 10<sup>9</sup></a> 
				<a href="javascript:bumpVal(1000000000000)">+ 10<sup>12</sup></a> 
				<div class="break"></div>
			</div>
			<div class="buttons">
				<a href="javascript:bumpVal(-0.1)">- 0.1</a> 
				<a href="javascript:bumpVal(-1)">- 1</a> 
				<a href="javascript:bumpVal(-100)">- 100</a> 
				<a href="javascript:bumpVal(-1000)">- 1000</a> 
				<a href="javascript:bumpVal(-1000000)">- 10<sup>6</sup></a> 
				<a href="javascript:bumpVal(-1000000000)">- 10<sup>9</sup></a> 
				<a href="javascript:bumpVal(-1000000000000)">- 10<sup>12</sup></a> 
				<div class="break"></div>
			</div>
			
			<p>Set the number of ticks:</p>
			<div class="buttons">
				<a href="javascript:setTickCount(0)">0 (None)</a> 
				<a href="javascript:setTickCount(2)">2</a> 
				<a href="javascript:setTickCount(5)">5</a> 
				<a href="javascript:setTickCount(6)">6</a> 
				<a href="javascript:setTickCount(11)">11</a> 
				<div class="break"></div>
			</div>
			
			<p>Set the range:</p>
			<div class="buttons">
				<a href="javascript:setRange(55, 36, -24, 25, 'rgba(255, 32, 0, 0.2')">Demo 1</a> 
				<a href="javascript:setRange(55, 36, -205, -155, 'rgba(0, 255, 32, 0.3')">Demo 2</a> 
				<a href="javascript:setRange(77, 6, -24, 25, 'rgba(255, 96, 32, 1')">Demo 3</a> 
				<div class="break"></div>
			</div>
			
			
			<!-- This script block defines the gauge parameters and includes some simple
			     functions to test the jGauge with (the above links use this) -->
			<script type="text/javascript">
				
			
			        // DEMOGAUGE1 - A very basic 'bare-bones' example...
				var demoGauge1 = new jGauge(); // Create a new jGauge.
				demoGauge1.id = 'jGaugeDemo1'; // Link the new jGauge to the placeholder DIV.
				
				
				// DEMOGAUGE2 - Using the new binary prefixing...
				var demoGauge2 = new jGauge(); // Create a new jGauge.
				demoGauge2.id = 'jGaugeDemo2'; // Link the new jGauge to the placeholder DIV.
				demoGauge2.label.suffix = 'B'; // Make the value label bytes.
				demoGauge2.autoPrefix = autoPrefix.binary; // Use binary prefixing (i.e. 1k = 1024).
				demoGauge2.ticks.count = 5;
				demoGauge2.ticks.end = 8;
				
				
				// DEMOGAUGE3 - This gauge is more complex to show a completely different style and is updated with random values...
				var demoGauge3 = new jGauge(); // Create a new jGauge.
				demoGauge3.id = 'jGaugeDemo3'; // Link the new jGauge to the placeholder DIV.
				demoGauge3.autoPrefix = autoPrefix.si; // Use SI prefixing (i.e. 1k = 1000).
				demoGauge3.imagePath = 'img/jgauge_face_taco.png';
				demoGauge3.segmentStart = -225
				demoGauge3.segmentEnd = 45
				demoGauge3.width = 170;
				demoGauge3.height = 170;
				demoGauge3.needle.imagePath = 'img/jgauge_needle_taco.png';
				demoGauge3.needle.xOffset = 0;
				demoGauge3.needle.yOffset = 0;
                                demoGauge3.label.yOffset = 55;
                                demoGauge3.label.color = '#fff';
                                demoGauge3.label.precision = 0; // 0 decimals (whole numbers).
				demoGauge3.label.suffix = 'W'; // Make the value label watts.
				demoGauge3.ticks.labelRadius = 45;
                                demoGauge3.ticks.labelColor = '#0ce';
                                demoGauge3.ticks.start = 200;
                                demoGauge3.ticks.end = 800;
                                demoGauge3.ticks.count = 7;
                                demoGauge3.ticks.color = 'rgba(0, 0, 0, 0)';
                                demoGauge3.range.color = 'rgba(0, 0, 0, 0)';
				
                                
				// This function is called by jQuery once the page has finished loading.
				$(document).ready(function()
				{
					demoGauge1.init(); // Put the jGauge on the page by initializing it.
					demoGauge2.init(); // Put the jGauge on the page by initializing it.
					demoGauge3.init(); // Put the jGauge on the page by initializing it.
					
					// Configure demoGauge3 for random value updates.
					demoGauge3.setValue(500);
					setInterval('randVal()', 100);
				});
				
				// That's all folks! We've created a jGauge and put it on the page! :-D
				// The following JavaScript functions are for the demonstration.
				// ----------------------------------------------------------------------
				
				
				
				
				// This is a test function that changes the gauge value.
				function setVal(value)
				{
					demoGauge1.setValue(value);
					demoGauge2.setValue(value);
				}
				
				// This is another test function that changes the gauge value.
				function bumpVal(value)
				{
					demoGauge1.setValue(demoGauge1.value + value);
					demoGauge2.setValue(demoGauge2.value + value);
				}
				
				// This is a test function that changes the number of ticks.
				function setTickCount(value)
				{
					demoGauge1.ticks.count = value;
					demoGauge1.updateTicks();
					
					demoGauge2.ticks.count = value;
					demoGauge2.updateTicks();
				}
				
				// This is a test function that changes the range styling.
				function setRange(radius, thickness, start, end, color)
				{
					demoGauge1.range.radius = radius;
					demoGauge1.range.thickness = thickness;
					demoGauge1.range.start = start;
					demoGauge1.range.end = end;
					demoGauge1.range.color = color;
					demoGauge1.updateRange();
					
					demoGauge2.range.radius = radius;
					demoGauge2.range.thickness = thickness;
					demoGauge2.range.start = start;
					demoGauge2.range.end = end;
					demoGauge2.range.color = color;
					demoGauge2.updateRange();
				}
				
				// This is our random value function for gauge 3.
				function randVal()
				{
				        var newValue;
				        
				        if (Math.random() > 0.8) // Allow needle to randomly pause.
				        {
				                newValue = demoGauge3.value + (Math.random() * 100 - 50);
				                
				                if (newValue >= demoGauge3.ticks.start && newValue <= demoGauge3.ticks.end)
				                {
				                        // newValue is within range, so update.
				                        demoGauge3.setValue(newValue);
				                }
				        }
				}
				
			</script>
			
			<noscript><div id="noscript-warning"><img src="img/no-script.gif" alt="jGauge requires JavaScript enabled" width="220" height="17" /></div></noscript>
		</div>
	</body>
</html>

